import {Component} from 'react';
import ReactDOM from 'react-dom';
import BlogList from './Home/BlogList';
import Float from './Home/Float';
import Labels from './Home/Labels';
import NoSelect from '../../../component/NoSelect';
import Icon from '../../../component/Icon';
import {getLoginSession} from '../../../plugin/loginSession';
import {trimHtmlTag, clone} from '../../../util/utils';
import {Modal, Input} from 'antd';
import {Link} from 'dva/router';
import {connect} from 'dva';
import style from './css/Home.css';

class Home extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		let loginSession = getLoginSession();
		let {blogPageInfo, labelList, labelModal} = state;
		let blogLabelList = clone(labelList);
		// 头部
		let headNode;
		let opNode;
		if(loginSession) {
			opNode = (
				<span>
					<span className={style.opButtonSeparator + ' ' + style.opButtonCreate} onClick={() => {
						dispatch({type: 'home/toEdit'});
					}}>
						新建
					</span>
					<span className={style.opButton} onClick={() => {
						dispatch({type: 'home/logout'});
					}}>
						退出
					</span>
				</span>
			);
		} else {
			opNode = (
				<span>
					<Link className={style.opButtonSeparator} to='/login'>登录</Link>
					<Link className={style.opButton} to='/register'>注册</Link>
				</span>
			);
		}
		// 文章列表
		let blogListItemNode = [];
		if(blogPageInfo) {
			let blogList = blogPageInfo.list;
			if(blogList && blogList.length > 0) {
				for(let i = 0; i < blogList.length; i ++) {
					let blog = blogList[i];
					if(blog.hidden) {
						continue;
					}
					let extra;
					if(loginSession) {
						extra = (
							<span>
								<a onClick={e => {
									e.stopPropagation();
									dispatch({
					        			type: 'home/changeLabelModalVisible',
					        			payload: true,
					        			currentRecordId: blog.recordId,
					        		})
								}}>
									标签
								</a>
								{' '}|{' '}
								<a onClick={e => {
									// 阻止冒泡
									e.stopPropagation();
									Modal.confirm({
										title: '你确定要删除这篇日志么?',
									    content: '立刻删除',
									    okText: '删除',
									    okType: 'danger',
									    cancelText: '取消',
									    onOk() {
									    	dispatch({type: 'home/removeBlog', payload: blog.recordId});
									    }
									});
								}}>
									删除
								</a>
							</span>
						);
					}
					blogListItemNode.push(
						<BlogList.Item key={blog.recordId} title={blog.title} content={trimHtmlTag(blog.content)} date={blog.createTime} labelList={blog.labelList} extra={extra} onClick={() => {
							dispatch({
								type: 'home/toBlogDetail',
								payload: {
									blog: blog,
									blogEdit: false,
								},
							});
						}}/>
					);
				}
			}
		}
		return(
			<div className='homePageContainer'>
				<div className={style.head}>
					<NoSelect className={style.headTitle}>{(loginSession && loginSession.username) || 'fengwk'}的博客</NoSelect>
					<span className={style.headOp}>
						{opNode}
					</span>
				</div>
				<div className={style.body}>
					<BlogList>
						{blogListItemNode}
					</BlogList>
				</div>
				<Modal 
				className='labelModal' 
	        	visible={labelModal.visible} 
	        	title={
	        		<NoSelect>
	        			<Icon className={style.opIcon} type={require('../../../asset/svg/guide.svg')}  />
	        			<span className={style.opLabel}>点击选取 | 长按删除</span>
	        		</NoSelect>
	        	} 
	        	closable={true} 
	        	footer={
	        		<Input.Search 
	        		placeholder='请输入标签名' 
	        		enterButton='新添' 
	        		value={labelModal.labelName} 
	        		onChange={
	        			e => dispatch({
	        				type: 'home/changeLabelModalLabelName',
	        				payload: e.target.value,
	        			})
	        		}
	        		onSearch={value => dispatch({type: 'home/addLabel'})}/>
	        	}
	        	onCancel={() => {
	        		dispatch({type: 'home/changeLabelModalVisible', payload: false});
	        		dispatch({type: 'home/pageBlogByUserId'});
	        	}}>
					<Labels 
					labels={blogLabelList} 
					selectedLabelIdMap={labelModal.selectedLabelIdMap} 
					onLongPress={(labelId, selected) => {
						Modal.confirm({
						    title: '删除标签',
						    okText: '删除',
						    cancelText: '取消',
						    onOk: () => {
						    	dispatch({
				        			type: 'home/removeLabel',
				        			labelId: labelId,
				        		});
						    }
						});
					}}
					onSelected={(labelId, selected) => {
						dispatch({
		        			type: 'home/LabelLink',
		        			labelId: labelId,
		        			currentSelected: selected,
		        		});
					}} />
		    </Modal>
		    <Float />
			</div>
		);
	}
	
	componentDidMount() {
		let {scrollTopRecord} = this.props.state;
		if (scrollTopRecord) {
			scrollTo(0, scrollTopRecord);
			this.props.dispatch({
				type: 'home/setScrollTopRecord',
				scrollTopRecord: undefined
			});
		} else 
			scrollTo(0, 0);
	}
	
}

export default connect((state) => ({
	state: {
		...state.home,
		loading: state.loading.models.home
	}
}))(Home);